<template>
  <div ref="resize" class="resize">
    <div ref="resizeHandle" class="handle-resize" :style="styleObject()" />
    <slot />
  </div>
</template>
<script>
export default {
  name: "ResizeBox",
  props: {
    resizeConf: {
      type: Object,
      default: () => ({
        width: 280, // 初始宽度
        widthRange: [100, 500], // 宽度范围
      }),
    },
  },
  mounted() {
    this.dragControllerDiv(this.$refs.resize, this.$refs.resizeHandle);
  },
  methods: {
    dragControllerDiv: function (resizeBox, resizeHandle) {
      resizeBox.style.width = this.resizeConf.width + "px";
      // 鼠标按下事件
      resizeHandle.onmousedown = (e) => {
        e.preventDefault();
        let resizeWidth = resizeBox.offsetWidth;
        let startX = e.clientX; // 水平坐标
        // 鼠标拖动事件
        document.onmousemove = (ev) => {
          let moveX = ev.clientX;
          let moveLen = 0;
          if ((this.resizeConf.direction || "left") === "left") {
            moveLen = resizeWidth + (moveX - startX);
          } else {
            moveLen = resizeWidth + (startX - moveX);
          }
          if (this.resizeConf.widthRange[0] <= moveLen && this.resizeConf.widthRange[1] >= moveLen) {
            resizeBox.style.width = moveLen + "px";
          }
        };
        // 鼠标松开事件
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },
    styleObject() {
      let newObg = {
        left: { right: " -0px" },
        right: { left: "-2px" },
      };
      return newObg[this.resizeConf.direction || "left"];
    },
  },
};
</script>
<style lang="scss" scoped>
.resize {
  background: #fff;
  position: relative;
  word-wrap: break-word;
  flex: none;
  .handle-resize {
    cursor: col-resize;
    position: absolute;
    width: 6px;
    height: 50px;
    border-left: 2px solid #c5c5c5;
    border-right: 2px solid #c5c5c5;
    top: calc(50% - 25px);
    z-index: 99;
  }
}
</style>
